<template>
  <div style="text-align: center; width: 680px; margin: auto; background: #fff">
    <table
        cellpadding="0"
        cellspacing="0"
        style="
        table-layout: fixed;
        position: relative;
        width: 100%;
        font-family: 仿宋_GB2312;
        font-size: 16px;
        margin: auto;
      "
    >
      <tr style="height: 10px">
        <td
            v-for="item in 100"
            :key="item"
            style="width: 1%; text-align: center"
        />
      </tr>
      <tr style="height: 60px">
        <td colspan="100" style="text-align: center">
          <span id="Lab_title" style="font-size: 24px; font-weight: bold"
          >水利工程质量检测单位乙级资质认定（变更申请）</span
          >
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">是否为川渝通办件</td>
        <td colspan="30" class="TableBorderRight">
          <el-checkbox
              v-model="formData.serviceType"
              class="input-center"
              :disabled="disabled"
              true-label="3"
              false-label="1"
              :checked="formData.serviceType==='3'"
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">单位名称</td>
        <td colspan="30" class="TableBorderOther">
          <input
              :disabled="disabled"
              v-model.trim="tempFormData.czzt"
              type="text"
              class="input-center"
          />
        </td>
        <td colspan="20" class="TableBorderOther">设立时间</td>
        <td colspan="30" class="TableBorderRight">
          <AdatePicker
              :disabled="disabled"
              v-model="tempFormData.estDate"
              :clearable="false"
              :pickerOptions="pickerOptions()"
              placeholder=""
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" rowspan="2" class="TableBorderOther">单位地址</td>
        <td colspan="80" class="TableBorderRight">
            <AreaSelect
                :form="tempFormData"
                :disabled="disabled"
                :proField="'detAddvcdProv'"
                :cityField="'detAddvcdCity'"
                :countyField="'detAddvcd'"
                :onlyCq="true"
            />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="80" class="TableBorderRight">
          <input
              v-model.trim="tempFormData.detAddrPart"
              :disabled="disabled"
              type="text"
              class="input-center"></input>
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">联系电话</td>
        <td colspan="30" class="TableBorderOther">
          <input
              v-model.trim="tempFormData.conNum"
              type="text"
              class="input-center"
              :disabled="disabled"
          />
        </td>
        <td colspan="20" class="TableBorderOther">邮政编码</td>
        <td colspan="30" class="TableBorderRight">
          <input
              v-model.trim="tempFormData.conPc"
              type="text"
              class="input-center"
              :disabled="disabled" />
        </td>
      </tr>
      <tr style="height: 70px">
        <td colspan="23" class="TableBorderOther">
          统一社会信用代码<br />(工商营业执照注册号、<br />事业法人登记号)
        </td>
        <td colspan="40" class="TableBorderOther">
          <input
              v-model.trim="tempFormData.czztdm"
              type="text"
              class="input-center"
              :disabled="disabled"
          />
        </td>
        <td colspan="10" class="TableBorderOther">传 真</td>
        <td colspan="30" class="TableBorderRight">
          <input
              v-model.trim="tempFormData.fax"
              type="text"
              class="input-center"
              :disabled="disabled"
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">注册资金（万元）</td>
        <td colspan="30" class="TableBorderOther">
          <input
              v-model.trim="tempFormData.regCapl"
              type="number"
              min="0"
              step="0.001"
              max="99999.999"
              @change="changeRegCapl"
              class="input-center"
              :disabled="disabled"
          />
        </td>
<!--        not changeable-->
        <td colspan="20" class="TableBorderOther">经济性质</td>
        <td colspan="30" class="TableBorderRight">
          {{ tempFormData.entType }}
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther">变更专业</td>
        <td colspan="80" class="TableBorderRight">
          <MultiSelect
              :disabled="disabled"
              v-model="tempFormData.certMajor"
              :options="majorOptions"
              placeholder=""
              @change="checkMajor"
          />
        </td>
      </tr>
      <tr style="height: 50px" v-if="izStock">
        <td colspan="23" class="TableBorderOther">原发证时间</td>
        <td colspan="80" class="TableBorderRight">
          <AdatePicker
              :disabled="disabled"
              v-model="tempFormData.firstIssuDate"
              :clearable="false"
              :pickerOptions="pickerOptions()"
              placeholder=""
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderOther" rowspan="2">法定代表人</td>
        <td colspan="16" class="TableBorderOther">
          <input
              v-model.trim="tempFormData.legRep"
              type="text"
              class="input-center"
              :disabled="disabled"
          />
        </td>
        <td colspan="10" class="TableBorderOther">职务</td>
        <td colspan="16" class="TableBorderOther">
          <input
              v-model.trim="tempFormData.legRepPost"
              type="text"
              class="input-center"
              :disabled="disabled"
          />
        </td>
        <td colspan="10" class="TableBorderOther">职称</td>
        <td colspan="28" class="TableBorderRight">
          <Aselect
              :disabled="disabled"
              v-model="tempFormData.legRepTitleCode"
              :options="$dict('title_level').list()"
              placeholder="" />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="20" class="TableBorderOther">身份证号</td>
        <td colspan="60" class="TableBorderRight">
          <input
              v-model.trim="tempFormData.legRepIdCard"
              type="text"
              class="input-center"
              :disabled="disabled"
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="23" class="TableBorderBottom">技术负责人</td>
        <td colspan="16" class="TableBorderBottom">
          <input
              v-model.trim="tempFormData.tecDire"
              type="text"
              class="input-center"
              :disabled="disabled"
          />
        </td>
        <td colspan="10" class="TableBorderBottom">职务</td>
        <td colspan="16" class="TableBorderBottom">
          <input
              v-model.trim="tempFormData.tecDirePost"
              type="text"
              class="input-center"
              :disabled="disabled"/>
        </td>
        <td colspan="10" class="TableBorderBottom">职称</td>
        <td colspan="28" class="TableBorderRightBottom">
          <Aselect
              :disabled="disabled"
              v-model="tempFormData.tecDireTitleCode"
              :options="$dict('title_level').list()"
              placeholder=""
          />
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import Aselect from '@/components/Select/Aselect';
import AdatePicker from '@/components/TimePicker/AdatePicker';
import MultiSelect from "@/components/Select/MultiSelect";
import businessApi from '@/api/business';
import { fieldsValidate } from '@/utils/validate.js';
import AreaSelect from "@/components/AreaSelect/AreaSelect";
export default {
  props: {
    formData: {
      type: Object,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    dataChange: {
      type: Boolean,
    }
  },
  components: {AreaSelect, Aselect, AdatePicker, MultiSelect },
  data() {
    return {
      tempFormData: {},
    };
  },
  watch: {
    formData: {
      handler(val) {
        this.tempFormData = val;
      },
      deep: true,
    },
  },
  computed: {
    // 申请专业选项
    majorOptions() {
      return businessApi.getApplyMajors(this.$dict('major').list(),!this.izStock, this.disabled);
    },
    izStock() {
      return this.formData.izStock || this.$store.state.user.izStock;
    },
  },
  methods: {
    // 检查专业
    checkMajor(value) {
      let majorList = value ? value.split(',') : [];
      businessApi.checkUnitMajorApply({
        majorType: value
      }).then(res => {
        if (res) {
          this.$message({
            message: '该专业已有申请中事项，请选择其他专业',
            type: 'warning',
          });
          majorList.pop();
        }
        this.tempFormData.certMajor = majorList.join(',');
      })
    },
    // 格式化小数
    changeRegCapl() {
      this.tempFormData.regCapl = Number(this.tempFormData.regCapl).toFixed(3);
    },
    // 日期选择器配置
    pickerOptions() {
      return {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      };
    },
    // 表单校验
    formValidated() {
      const rules = {
        czzt: [
          { required: true, text: '请输入单位名称', trigger: 'blur' },
          { max: 50, text: '单位名称最多50个字符', trigger: 'blur' },
        ],
        czztdm: [
          { required: true, text: '请输入统一社会信用代码', trigger: 'blur' },
          { max: 50, text: '统一社会信用代码最多50个字符', trigger: 'blur' },
        ],
        regCapl: [
          { required: true, text: '请输入注册资金', trigger: 'blur' },
          { max: 5, text: '注册资金最多5位', trigger: 'blur' },
        ],
        legRep: [
          { required: true, text: '请输入法定代表人', trigger: 'blur' },
          { max: 50, text: '法定代表人最多50个字符', trigger: 'blur' },
        ],
        legRepPost: [
          { required: true, text: '请输入法定代表人职务', trigger: 'blur' },
          { max: 50, text: '职务最多50个字符', trigger: 'blur' },
        ],
        legRepIdCard: [
          { required: true, text: '请输入法定代表人身份证号', trigger: 'blur' },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            text: '请输入正确的法定代表人身份证号',
            trigger: 'blur',
          },
        ],
        conNum: [
          { required: true, text: '请输入联系电话（手机）' },
          {
            pattern: /^1[3456789]\d{9}$/,
            text: '请输入正确的联系电话（手机）',
          },
        ],
        tecDire: [
          { required: true, text: '请输入技术负责人', trigger: 'blur' },
          { max: 50, text: '技术负责人最多50个字符', trigger: 'blur' },
        ],
        tecDirePost: [
          { required: true, text: '请输入技术负责人职务', trigger: 'blur' },
          { max: 50, text: '职务最多50个字符', trigger: 'blur' },
        ],
        legRepTitleCode: [
          { required: true, text: '请选择法定代表人职称', trigger: 'blur' },
        ],
        tecDireTitleCode: [
          { required: true, text: '请选择技术负责人职称', trigger: 'blur' },
        ],
        certMajor: [
          { required: true, text: '请选择变更专业', trigger: 'blur' },
        ],
      };
      if (this.izStock) {
        rules['firstIssuDate'] = [
          { required: true, text: '请选择首次发证日期', trigger: 'blur' },
        ];
      }
      return fieldsValidate(this.tempFormData, rules, this);
    },
  },
};
</script>
<style lang="scss" scoped>
@import '../../../../../../assets/styles/word.scss';
.list-item {
  position: relative;
  .icon {
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-style: normal;
    color: red;
    cursor: pointer;
  }
}
</style>
